import React from 'react'
import PropTypes from 'prop-types'
import {AutoComplete, Button, Col, DatePicker, Form, Input, Radio, Row, Select, TimePicker} from 'antd'
import moment from 'moment'

const FormItem = Form.Item
const {Option} = Select
const formItemLayout = {
  labelCol: {span: 8},
  wrapperCol: {span: 16},
  style: {
    marginBottom: 10,
  },
}

const Filter = ({
                  filter: {wxId, belongEmpId, belongDeptId, startDay, startHour, endDay, endHour, adAcquireType: adAcquireTypeParam, wxIds},
                  onFilterChange,
                  adAcquireType,
                  condition,
                  empList,
                  tabsKey,
                  departments,
                  handleSearch,
                  handleOnChange,
                  form: {
                    getFieldDecorator,
                    getFieldsValue,
                    setFieldsValue,
                  },
                }) => {

  const handleSubmit = () => {
    let fields = getFieldsValue()
    let {wxId, adAcquireType, dataSize, belongEmpId, belongDeptId} = fields
    let data = {}
    switch (tabsKey) {
      case "table_form":
        wxId && (data.wxId = wxId)
        adAcquireType && (data.adAcquireType = adAcquireType)
        data.start = `${fields.startDay._d.format('yyyy-MM-dd')} ${fields.startHour._d.format('hh:mm:ss')}`
        data.end = `${fields.endDay._d.format('yyyy-MM-dd')} ${fields.endHour._d.format('hh:mm:ss')}`
        belongEmpId && (data.belongEmpId = belongEmpId)
        belongDeptId && (data.belongDeptId = belongDeptId)
        break
      default:
        dataSize && (data.dataSize = dataSize)
        wxId && (data.wxId = wxId)
        belongEmpId && (data.belongEmpId = belongEmpId)
        belongDeptId && (data.belongDeptId = belongDeptId)
        break
    }
    onFilterChange(data)
  }

  const handleFormReset = () => {
    const fields = getFieldsValue()
    for (let item in fields) {
      fields[item] = undefined
    }
    setFieldsValue(fields)
    handleSubmit()
  }

  const renderConditionItem = (type) => {

    switch (type) {
      case "wxId":
        return (<FormItem {...formItemLayout}>
          {getFieldDecorator('wxId', {initialValue: wxId})(<Input allowClear style={{width: "100%"}} placeholder="运营微信号"/>)}
        </FormItem>)
        break
      case "employee":
        return (<FormItem {...formItemLayout}>
          {getFieldDecorator('belongEmpId', {initialValue: belongEmpId})(
            <AutoComplete
              allowClear
              dataSource={empList.map(item => <Option key={item.id}>{item.name}</Option>)}
              style={{width: '100%'}}
              onSearch={handleSearch}
              placeholder="员工编号或名称"
            />,
          )}
        </FormItem>)
        break
      case "department":
        return (<FormItem {...formItemLayout}>
          {getFieldDecorator('belongDeptId', {initialValue: belongDeptId})(
            <Select style={{width: '100%'}} allowClear placeholder="请选择部门">
              {departments.map(item => (<Option value={item.id} key={item.name}>{item.name}</Option>))}
            </Select>,
          )}
        </FormItem>)
        break
    }
  }

  const filterOfTable = (
    <div>
      <Row gutter={24}>
        <Col md={18} sm={24}>
          <FormItem {...formItemLayout} labelCol={{span: 4}} wrapperCol={{span: 16}} label="选择日期">
            <Col span={6} style={{marginRight: 10}}>
              <FormItem>
                {getFieldDecorator('startDay', {
                  initialValue: startDay || moment(new Date(), 'yyyy-MM-dd'),
                  rules: [{required: true, message: '请输入角色名称'}],
                })(<DatePicker style={{width: '100%'}}/>)}
              </FormItem>
            </Col>
            <Col span={5}>
              <FormItem>
                {getFieldDecorator('startHour', {initialValue: startHour || moment('00:00', 'HH:mm')})(<TimePicker
                  style={{width: '100%'}} minuteStep={60} format="HH:mm"/>)}
              </FormItem>
            </Col>
            <Col span={1}>
              <span style={{display: 'inline-block', width: '100%', textAlign: 'center'}}>
                -
              </span>
            </Col>
            <Col span={6} style={{marginRight: 10}}>
              <FormItem>
                {getFieldDecorator('endDay', {initialValue: endDay || moment(new Date(), 'yyyy-MM-dd')})(<DatePicker
                  style={{width: '100%'}}/>)}
              </FormItem>
            </Col>
            <Col span={5}>
              <FormItem>
                {getFieldDecorator('endHour', {initialValue: endHour || moment(new Date().getHours() + ':00', 'HH:mm')})(
                  <TimePicker style={{width: '100%'}} minuteStep={60} format="HH:mm"/>)}
              </FormItem>
            </Col>
          </FormItem>
        </Col>
        <Col span={6}>
          <FormItem {...formItemLayout} label="广告获客渠道">
            {getFieldDecorator('adAcquireType', {initialValue: adAcquireTypeParam})(
              <Select style={{width: "100%"}} allowClear placeholder="请选择">
                {adAcquireType.map(item => (<Option value={item.id} key={item.name}>{item.name}</Option>))}
              </Select>,
            )}
          </FormItem>
        </Col>
      </Row>

      <Row gutter={24}>
        <Col md={12} sm={24}>
          <FormItem {...formItemLayout} labelCol={{span: 6}} label="条件搜索">
            <Col span={6}>
              <FormItem>
                {getFieldDecorator('condition', {initialValue: condition})(
                  <Select onChange={handleOnChange} style={{width: "100%"}}>
                    <Option value="wxId">按微信号</Option>
                    <Option value="employee">按员工</Option>
                    <Option value="department">按部门</Option>
                  </Select>,
                )}
              </FormItem>
            </Col>
            <Col span={2}>
              <span style={{display: 'inline-block', width: '100%', textAlign: 'center'}}>
                -
              </span>
            </Col>
            <Col span={16}>
              {renderConditionItem(condition)}
            </Col>
          </FormItem>
        </Col>

        <Col md={7} sm={24}>
          <FormItem {...formItemLayout} labelCol={{span: 10}} wrapperCol={{span: 14}} label="微信号批量搜索">
            {getFieldDecorator('wxIds', {initialValue: wxIds})(<Input placeholder="微信号之间逗号隔开"/>)}
          </FormItem>
        </Col>

        <Col span={5} style={{textAlign: "right"}}>
          <div>
            <Button className="margin-right" type="primary" onClick={handleSubmit}>查询</Button>
            <Button onClick={handleFormReset}>重置</Button>
          </div>
        </Col>
      </Row>
    </div>
  )

  const filterOfDiagram = (
    <Row gutter={24}>
      <Col md={10} sm={24}>
        <FormItem {...formItemLayout} labelCol={{span: 4}} label="时间">
          {getFieldDecorator('dataSize', {initialValue: "0"})
          (<Radio.Group>
            <Radio.Button value="0">今天</Radio.Button>
            <Radio.Button value="1">昨天</Radio.Button>
            <Radio.Button value="7">最近7天</Radio.Button>
            <Radio.Button value="30">最近30天</Radio.Button>
          </Radio.Group>)
          }
        </FormItem>
      </Col>
      <Col md={10} sm={24}>
        <FormItem {...formItemLayout} labelCol={{span: 4}} wrapperCol={{span: 20}} label="条件搜索">
          <Col span={8}>
            <FormItem>
              {getFieldDecorator('condition', {initialValue: condition})(
                <Select onChange={handleOnChange} style={{width: "100%"}}>
                  <Option value="wxId">按微信号</Option>
                  <Option value="employee">按员工</Option>
                  <Option value="department">按部门</Option>
                </Select>,
              )}
            </FormItem>
          </Col>
          <Col span={2}>
            <span style={{display: 'inline-block', width: '100%', textAlign: 'center'}}>
              -
              </span>
          </Col>
          <Col span={14}>
            {renderConditionItem(condition)}
          </Col>
        </FormItem>
      </Col>
      <Col span={4}>
        <div>
          <Button className="margin-right" type="primary" onClick={handleSubmit}>查询</Button>
          <Button onClick={handleFormReset}>重置</Button>
        </div>
      </Col>
    </Row>
  )

  return (
    <div>
      {tabsKey === "table_form" ? filterOfTable : filterOfDiagram}
    </div>
  )
}

Filter.propTypes = {
  onFilterChange: PropTypes.func,
}
export default Form.create()(Filter)
